<script setup lang="ts">
import Search from "./Search/index.vue";
import ClusterSwitch from "./ClusterSwitch/index.vue";
import Tool from "./Tool/index.vue";
import ThematicMap from "./ThematicMap/index.vue";
import Legend from "./Legend/index.vue";
import StatisticsPanel from "./StatisticsPanel/index.vue";
import StatisticsResult from "./StatisticsResult/index.vue";
import StatisticsChart from "./StatisticsChart/index.vue";
import StatisticsTable from "./StatisticsTable/index.vue";
import { useLocalStore } from "../../store";
defineProps({
  deviceCategoryList: { type: { point: Array<any>, line: Array<any> } },
});
const isShowLegend = ref(false);
const isShowStatisticsTable = ref(false);
const store = useLocalStore();
const {
  statisticsCategory,
  statisticChartVisible,
  statisticsConditionFromChart,
} = storeToRefs(store);
const toggleShowLegend = () => (isShowLegend.value = !isShowLegend.value);
const toggleShowStatisticsTable = () =>
  (isShowStatisticsTable.value = !isShowStatisticsTable.value);
watchEffect(() => {
  isShowStatisticsTable.value = !!statisticsConditionFromChart.value;
});
onUnmounted(() => {
  store.setStatisticsConditionFromChart(null)
  store.showStatisticChart(false)
})
</script>

<template>
  <Search />
  <ClusterSwitch />
  <Tool @toggle-show-legend="toggleShowLegend" />
  <ThematicMap />
  <Legend
    v-if="isShowLegend"
    @toggle-show-legend="toggleShowLegend"
    :deviceCategoryList="deviceCategoryList"
  />
  <template v-if="!statisticChartVisible">
    <StatisticsPanel
      v-if="statisticsCategory >= 0 && statisticsCategory <= 3"
      :statisticsCategory="statisticsCategory"
      :deviceCategoryList="deviceCategoryList"
    />
    <StatisticsResult
      v-if="statisticsCategory === 4"
      :deviceCategoryList="deviceCategoryList"
    />
  </template>
  <StatisticsChart v-if="statisticChartVisible" />
  <StatisticsTable
    v-if="isShowStatisticsTable"
    :statisticsConditionFromChart="statisticsConditionFromChart"
    @toggle-show-table="toggleShowStatisticsTable"
  />
</template>

<style scoped lang="scss"></style>
